<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>补助信息</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" />
</head>
<style>
    .chaxun {
        display: inline;
        width: 90%;
        margin-right: 20px;
    }
    
    .dignbuanniu {
        margin: 15px 0;
    }
    
    .dingbuyihang {
        padding: 0px 10px;
        width: 90%;
    }
    /*水平竖直居中  */
    
    .juzhong {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .xingzhengcunxinxitianjia {
        width: 60%;
    }
    
    .hanggao {
        margin: 15px 0px;
    }
    
    .xiangqingtitle {
        color: #999;
    }
    
    .xiangqingcontent {
        text-align: left;
        width: 50%;
    }
    
    .xiangqingjianjie {
        width: auto;
        text-align: left;
        text-indent: 40px;
        padding: 9px 40px;
    }
    
    img {
        height: 300px;
    }
</style>

<body>
    <div style="padding: 20px; background-color: #f2f2f2;">
        <div class="layui-card layui-col-space15" style="padding: 20px; background-color: #fff;">
            <div class="layui-card-body">
                <!-- 顶部按钮 -->
                <form class="layui-form" action="" lay-filter="saixuan">
                    <div class="layui-row">

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn" onclick="tianjia()">
                        <i class="layui-icon layui-icon-addition"></i>&nbsp;&nbsp;添加
                      </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn layui-btn-danger" onclick="shanchucheck()">
                        <i class="layui-icon layui-icon-delete"></i>&nbsp;&nbsp;删除
                      </button>
                        </div>
                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn" onclick="daochuxuanzhehang()">
                                <i class="layui-icon layui-icon-upload-drag"></i>&nbsp;&nbsp;导出选中行
                              </button>

                        </div>

                        <div class="layui-col-xs3 layui-col-sm3 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="qu1" name="areaId" lay-verify="required" lay-filter="qu1">
                                    <option value="">地区筛选(区/县)</option>
                                </select>
                            </label>
                        </div>

                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="zhen1" name="townid" lay-verify="required" name="townId" lay-filter="zhen1">
                                    <option value="">地区筛选(镇/街道)</option>
                                </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">

                            <label class="layui-form-label dingbuyihang">
                        <select name="villageId" lay-verify="required" id="cun1" name="villageId">
                            <option value="">地区筛选(村)</option>
                        </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <input type="text" name="keyWords" required lay-verify="required" placeholder="查询内容或字段" autocomplete="off" class="layui-input chaxun">
                        </div>
                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn" onclick="chaxun()">
                                <i class="layui-icon layui-icon-search"></i>&nbsp;&nbsp;查询
                              </button>
                        </div>

                    </div>
                </form>
                <!-- 底部表格 -->
                <table id="hukouqianyi" lay-filter="biaoge"></table>
                <!-- 底部上传按钮 -->
                <div class="kaoyou">
                    <button type="button" class="layui-btn" id="shangchuanwenjian">
                        上传  &nbsp;&nbsp; <i class="layui-icon layui-icon-upload"></i>
                         </button>
                    <a type="button" class="layui-btn" href="http://47.94.152.81:8082/Excel/subsidyTemplate">
                        <i class="layui-icon layui-icon-download-circle"></i>&nbsp;&nbsp;下载模板
                    </a>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="../../layui/layui.js"></script>
<script src="../../mock/mock/mock-min.js"></script>
<script src="../../js/jquery-3.4.1.js"></script>
<script src="../../mock/mock1.js"></script>

<script>
    var table
    var form
    var option
    var laydate
    var upload
    layui.use(["upload", "laydate", "table", "jquery", "form"], function() {
        table = layui.table;
        form = layui.form;
        laydate = layui.laydate;
        upload = layui.upload;
        shangchuanxinxi()
        form.render();
        //监听提交
        form.on('submit(tijiao)', function(data) {
            chongzai()
        });
        //监听编辑
        form.on('submit(bianji)', function(data) {
            chongzai()
        });
        table.on('tool(biaoge)', function(obj) {
            console.log(obj);
            switch (obj.event) {
                // 编辑页面
                case 'edit':
                    layer.open({
                        type: 1,
                        title: "组信息编辑",
                        content: `
                        
<div class="juzhong">
    <form class="layui-form xingzhengcunxinxitianjia" lay-filter="bianji" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属组</label>
            <div class="layui-input-block">
                <select id="zu" name="groupId" lay-verify="required" lay-filter="zu">
                    <option value="">请输入所属组</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助类型</label>
            <div class="layui-input-block">
                <select  id="buzhuxiangleixing" name="subsidyTypeId" lay-verify="required" lay-filter="buzhuxiangleixing">
                        <option value="">请选择补助项</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助项</label>
            <div class="layui-input-block">
                <select id="buzhuxiang" name="subsidyId" lay-verify="required"lay-filter="buzhuxiang">
                        <option value="">请选择补助项</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否是补助个人</label>
            <div class="layui-input-block">
                <select name="personal" lay-verify="required">
                        <option value="0">是</option>
                        <option value="1">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助个人姓名</label>
            <div class="layui-input-block">
                <input type="text" value="` + obj.data.name + `" lay-filter="hukouqianyi" name="name" required lay-verify="required" placeholder="请输入村民(补助对象或补助户)姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-verify="required">
                        <option value="1">男</option>
                        <option value="2">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">民族</label>
            <div class="layui-input-block">
                <select id="minzu" name="nation" lay-verify="required">
                        <option value="">请选择民族</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="number" value="` + obj.data.phone + `" lay-filter="hukouqianyi" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" value="` + obj.data.identitynumber + `"  lay-filter="hukouqianyi" name="identitynumber" required lay-verify="required" placeholder="请输入村民身份证号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">家庭地址</label>
            <div class="layui-input-block">
                <input type="text" value="` + obj.data.address + `"  lay-filter="hukouqianyi" name="address" required lay-verify="required" placeholder="请输入村民家庭地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">申请时间</label>
            <div class="layui-input-block">
                <input type="text" value="` + obj.data.applicationTime + `"  name="applicationTime"  placeholder="选择申请时间" class="layui-input" id="shenqingshijian" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助原因</label>
            <div class="layui-input-block">
                <textarea id="yuanyin" value="` + obj.data.cause + `"  name="cause" placeholder="请输入补助原因" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea id="beizhu"  value="` + obj.data.remarks + `"  name="remarks" placeholder="请输入备注信息 -> 不同对象 补助信息 的附加说明" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>
`,
                        offset: "auto",
                        area: ["1000px", "800px"],
                        success: function() {
                            areas.forEach(item => {
                                $('#qu')[0].innerHTML += `<option value="` + item.id + `">` + item.name + `</option>`
                            })
                            towns.forEach(item => {
                                $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })
                            villages.forEach(item => {
                                $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })
                            minzu.forEach(item => {
                                $('#minzu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })

                            // 监听每一个选择框的选择事件
                            var bianjiqu = ""
                                // 1.区选择
                            form.on('select(qu)', function(data) {
                                bianjiqu = data.value
                                $('#zhen').empty()
                                $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                                towns.forEach(item => {
                                    if (item.areaId == data.value) {
                                        $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    }
                                })
                                form.render('select', "bianji")
                            });
                            // 2.镇监听
                            form.on('select(zhen)', function(data) {
                                $('#cun').empty()
                                $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                                villages.forEach(item => {
                                    if (item.townId == data.value) {
                                        $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    }
                                })
                                form.render('select', "bianji")
                            });
                            // 村监听
                            form.on('select(cun)', function(data) {
                                console.log(data.value)
                                $('#zu').empty()
                                $('#zu')[0].innerHTML += ` <option value="">请选择所属组</option>`

                                if (data.value != "") {
                                    var data1 = {}
                                    console.log(getvillage(data.value))
                                    data1.areaId = bianjiqu
                                    data1.townId = getvillage(data.value).townId
                                    data1.villageId = data.value
                                    console.log(data1)
                                    $.ajax({
                                            url: url + "group/querygroup",
                                            method: "get",
                                            data: data1,
                                            success: function(data) {
                                                console.log(data)
                                                data.data.group.forEach(item => {
                                                    $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                                })
                                                form.render('select', "bianji")
                                            },
                                            error: function(err) {
                                                console.log(err)
                                            }
                                        })
                                        // 添加补助项类型选项
                                    var data1 = {}
                                    data1.area = bianjiqu
                                    data1.townId = data.value
                                    data1.townId = getvillage(data.value).townId
                                    data1.size = 100
                                    data1.currrntPage = 1
                                        // 添加补助项类型
                                    $.ajax({
                                        url: url + "subsidytype/querysubsidytype",
                                        method: "get",
                                        data: data1,
                                        success: function(data) {
                                            console.log(data)
                                            buzhuleixing = data.data.subsidytypes
                                            data.data.subsidytypes.forEach(item => {
                                                $('#buzhuxiangleixing')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                            })
                                            form.render('select', "bianji")
                                        },
                                        error: function(err) {
                                            console.log(err)
                                        }
                                    })

                                    // 添加补助项选项信息
                                    $.ajax({
                                        url: url + "subsidy/querysubsidy",
                                        method: "get",
                                        data: data1,
                                        success: function(data) {
                                            console.log(data)
                                            buzhuxiang = data.data.subsidys
                                            data.data.subsidys.forEach(item => {
                                                $('#buzhuxiang')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                            })
                                            form.render('select', "bianji")
                                        },
                                        error: function(err) {
                                            console.log(err)
                                        }
                                    })
                                }
                                form.render('select', "bianji")
                            })

                            // 组赋值
                            var datatype = {}
                            datatype.areaId = bianjiqu
                            datatype.villageId = obj.data.villageId
                            datatype.townId = obj.data.townId
                            $.ajax({
                                    url: url + "group/querygroup",
                                    method: "get",
                                    data: datatype,
                                    success: function(data) {
                                        console.log(data)
                                        data.data.group.forEach(item => {
                                            $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                        })

                                        $('#zu').val(obj.data.groupId);
                                        form.render('select', "bianji")
                                    },
                                    error: function(err) {
                                        console.log(err)
                                    }
                                })
                                // 为补助类型和补助项赋值
                                // 添加补助项类型选项
                            var data1 = {}
                            data1.areaId = bianjiqu
                            data1.villageId = obj.data.villageId
                            data1.townId = getvillage(data1.villageId).townId
                            data1.size = 100
                            data1.currrntPage = 1
                                // 添加补助项类型选项
                            $.ajax({
                                url: url + "subsidytype/querysubsidytype",
                                method: "get",
                                data: data1,
                                success: function(data) {
                                    console.log(data)
                                    buzhuleixing = data.data.subsidytypes
                                    data.data.subsidytypes.forEach(item => {
                                        $('#buzhuxiangleixing')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    })
                                    $('#buzhuxiangleixing').val(obj.data.subsidyTypeId);
                                    form.render('select', "bianji")
                                },
                                error: function(err) {
                                    console.log(err)
                                }
                            })

                            data1.currrntPage = 1
                            data1.size = 1000
                                // 添加补助项选项信息
                            $.ajax({
                                url: url + "subsidy/querysubsidy",
                                method: "get",
                                data: data1,
                                success: function(data) {
                                    console.log(data)
                                    buzhuxiang = data.data.subsidys
                                    data.data.subsidys.forEach(item => {
                                        $('#buzhuxiang')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    })
                                    $('#buzhuxiang').val(obj.data.subsidyId);
                                    form.render('select', "bianji")
                                },
                                error: function(err) {
                                    console.log(err)
                                }
                            })
                            $('#qu').val(obj.data.areaId);
                            $('#zhen').val(obj.data.townId);
                            $('#cun').val(obj.data.villageId);
                            $('#sex').val(obj.data.sex);
                            $('#minzu').val(obj.data.nation);
                            $('#yuanyin').val(obj.data.cause);
                            $('#beizhu').val(obj.data.remarks);
                            form.render('select', "bianji")

                            form.on('select(buzhuxiangleixing)', function(data) {
                                    $('#buzhuxiang').empty()
                                    $('#buzhuxiang')[0].innerHTML += ` <option value="">请选择补助项</option>`
                                    buzhuxiang.forEach(item => {
                                        if (item.typeId == data.value) {
                                            $('#buzhuxiang')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                        }
                                    })
                                    form.render('select', "bianji")
                                })
                                // 时间监听
                            laydate.render({
                                elem: '#shenqingshijian' //指定元素
                            });
                        },
                        btn: ['保存编辑', ], //可以无限个按钮
                        btnAlign: "c",
                        btn1: function() {
                            var data = form.val("bianji");

                            data.id = obj.data.id;
                            data.applicationTime = shijianfuhaozhuanhua(data.applicationTime)
                                // 寻找镇id
                            console.log(data);
                            $.ajax({
                                url: url + "general/subsidyinfo/editorsavesubsidyinfo",
                                data: data,
                                method: "post",
                                success: function(data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.closeAll();
                                        table.reload("biaoge1", option);
                                        layer.msg('编辑成功!')
                                    } else {
                                        layer.msg(data.msg)
                                    }
                                },
                                error: function(err) {
                                    layer.msg('添加失败!')
                                },
                            });
                        }
                    });
                    break;
                case 'delete':
                    layer.open({
                        type: 1,
                        title: '删除',
                        offset: "auto",
                        content: `<div style="font-size: 14px; color: #606266;line-height: 100px;height: 100px;text-align: center;">确认要删除当前项吗!</div>`,
                        area: ["350px", "200px"],
                        btn: ['删除', '取消', ], //可以无限个按钮
                        btn1: function() {
                            var data = {};
                            data.ids = obj.data.id
                            console.log(data)
                            $.ajax({
                                url: url + "general/subsidyinfo/delesubsidyinfo",
                                method: "get",
                                data: data,
                                success: function(data) {
                                    if (data.code === 200) {
                                        console.log(data);
                                        table.reload("biaoge1", option);
                                        layer.msg('删除成功!')
                                    } else {
                                        layer.msg(data.msg)
                                    }
                                },
                                error: function(err) {
                                    layer.msg('删除失败!')
                                },
                            });
                            layer.closeAll();
                        },
                        btn2: function() {
                            layer.msg('已取消操作')
                        }
                    })
                    break;
                case 'xiangqing':
                    layer.open({
                        type: 1,
                        title: "详细信息",
                        offset: "auto",
                        content: `
                        <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">补助项名字</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.subsidyName + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">个人姓名</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.name + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">所属村</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.villagename + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">所属街道</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.townname + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">性别</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.sexname + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">民族</label>
                        <label class="layui-form-label xiangqingcontent">` + getminzu(obj.data.nation).name + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">手机号</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.phone + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">身份证号</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.identitynumber + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">家庭住址</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.address + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">申请时间</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.applicationTime + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">补助原因</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.cause + `</label>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 hanggao">
                        <label class="layui-form-label xiangqingtitle">备注信息</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.remarks + `</label>
                    </div>
                </div>
                        `,
                        area: ["900px", "450px"],
                        btn: ['确定', ], //可以无限个按钮
                        btnAlign: "c",
                        btn1: function() {
                            layer.closeAll();
                        }
                    })
                    break;
                default:
                    break;
            }
        })
        chongzai()
            // 获取所有列表数据的参数
        option = {
            id: 'biaoge1',
            elem: "#hukouqianyi",
            url: url + "general/subsidyinfo/querysubsidyinfo",
            page: true,
            title: "补助信息",
            size: "lg",
            limits: [10, 20, 50, 100, 200, 500],
            headers: {
                token: localStorage.getItem('token')
            },
            text: {
                none: "本页暂无数据,请刷新页面", //默认：无数据。
            },
            request: {
                pageName: "currrntPage", //页码的参数名称，默认：page
                limitName: "size", //每页数据量的参数名，默认：limit
            },
            where: {},
            page: {
                curr: 1 //重新从第 1 页开始
            },
            parseData: function(res) {
                if (res.code == "401") {
                    window.parent.window.location.href = "../login/index.html"
                }
                //res 即为原始返回的数据
                return {
                    code: 0, //解析接口状态
                    msg: res.msg, //解析提示文本
                    count: res.data.count, //解析数据长度
                    data: setdata(res.data.subsidyinfo), //解析数据列表
                };
            },
            cols: [
                [{
                    type: "checkbox",
                }, {
                    type: "numbers",
                    title: "序号",
                }, {
                    field: "villagename",
                    title: "所属村",
                    align: "center",
                }, {
                    field: "name",
                    title: "补助对象",
                    align: "center",
                }, {
                    field: "typeName",
                    title: "补助类型",
                    align: "center",
                }, {
                    field: "subsidyName",
                    title: "补助项",
                    align: "center",
                }, {
                    field: "applicationTime",
                    title: "申请时间",
                    align: "center",
                }, {
                    field: "remarks",
                    title: "备注信息",
                    align: "center",
                }, {
                    title: "操作",
                    toolbar: "#caozuo",
                    align: "center",
                }, ],
            ],
        }
        tableIns = table.render(option);

        //添加筛选条件
        areas.forEach(item => {
                // console.log($('#zhen1')[0].innerHTML)
                $('#qu1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
            })
            // 镇生成
        towns.forEach(item => {
                // console.log($('#zhen1')[0].innerHTML)
                $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
            })
            //镇生成
        form.on('select(qu1)', function(data) {
            $('#zhen1').empty()
            $('#zhen1')[0].innerHTML += ` <option value="">地区筛选(镇/街道)</option>`
            villages.forEach(item => {
                if (item.areaId == data.value) {
                    $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                }
            })
            form.render('select', "saixuan")
        });
        // 村生成
        form.on('select(zhen1)', function(data) {
            $('#cun1').empty()
            $('#cun1')[0].innerHTML += ` <option value="">地区筛选(村)</option>`
            villages.forEach(item => {
                if (item.townId == data.value) {
                    $('#cun1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                }
            })
            form.render('select', "saixuan")
        });
        form.render('select', "saixuan")
    });
    // 表格信息重载         (根据列表参数获取所有列表数据)
    function chongzai() {}
    // 控制添加数据用的弹出层
    function tianjia() {
        layer.open({
            type: 1,
            title: "补助信息添加",
            content: `
<div class="juzhong">
    <form class="layui-form xingzhengcunxinxitianjia" lay-filter="tianjia" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属组</label>
            <div class="layui-input-block">
                <select id="zu" name="groupId" lay-verify="required" lay-filter="zu">
                    <option value="">请输入所属组</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助类型</label>
            <div class="layui-input-block">
                <select  id="buzhuxiangleixing" name="subsidyTypeId" lay-verify="required" lay-filter="buzhuxiangleixing">
                        <option value="">请选择补助项</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助项</label>
            <div class="layui-input-block">
                <select id="buzhuxiang" name="subsidyId" lay-verify="required"lay-filter="buzhuxiang">
                        <option value="">请选择补助项</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否是补助个人</label>
            <div class="layui-input-block">
                <select name="personal" lay-verify="required">
                        <option value="0">是</option>
                        <option value="1">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助个人姓名</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" name="name" required lay-verify="required" placeholder="请输入村民(补助对象或补助户)姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-verify="required">
                        <option value="1">男</option>
                        <option value="2">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">民族</label>
            <div class="layui-input-block">
                <select id="minzu" name="nation" lay-verify="required">
                        <option value="">请选择民族</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="number" lay-filter="hukouqianyi" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" name="identitynumber" required lay-verify="required" placeholder="请输入村民身份证号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">家庭地址</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="hukouqianyi" name="address" required lay-verify="required" placeholder="请输入村民家庭地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">申请时间</label>
            <div class="layui-input-block">
                <input type="text" name="applicationTime"  placeholder="选择申请时间" class="layui-input" id="shenqingshijian" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">补助原因</label>
            <div class="layui-input-block">
                <textarea name="cause" placeholder="请输入补助原因" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remarks" placeholder="请输入备注信息 -> 不同对象 补助信息 的附加说明" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn tijiao" lay-filter="tijiao">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>
`,
            offset: "auto",
            area: ["1000px", "800px"],
            success: function() {

                areas.forEach(item => {
                    $('#qu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                towns.forEach(item => {
                    $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                villages.forEach(item => {
                    $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                minzu.forEach(item => {
                    $('#minzu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })

                // 监听每一个选择框的选择事件
                // 1.区选择
                var tianjiaqu = ""
                form.on('select(qu)', function(data) {
                    tianjiaqu = data.value
                    $('#zhen').empty()
                    $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                    towns.forEach(item => {
                        if (item.areaId == data.value) {
                            $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                });
                // 2.镇监听
                form.on('select(zhen)', function(data) {
                    $('#cun').empty()
                    $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                    villages.forEach(item => {
                        if (item.townId == data.value) {
                            $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                });
                // 村监听
                form.on('select(cun)', function(data) {
                    console.log(data.value)
                    $('#zu').empty()
                    $('#zu')[0].innerHTML += ` <option value="">请选择所属组</option>`

                    if (data.value != "") {
                        // 为组进行赋值
                        var data1 = {}
                        console.log(getvillage(data.value))
                        data1.areaId = tianjiaqu
                        data1.townId = getvillage(data.value).townId
                        data1.villageId = data.value
                        console.log(data1)
                        $.ajax({
                                url: url + "group/querygroup",
                                method: "get",
                                data: data1,
                                success: function(data) {
                                    console.log(data)
                                    data.data.group.forEach(item => {
                                        $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    })
                                    form.render('select', "tianjia")
                                },
                                error: function(err) {
                                    console.log(err)
                                }
                            })
                            // 添加补助项类型选项
                        data1.size = 100
                        data1.currrntPage = 1
                        $.ajax({
                            url: url + "subsidytype/querysubsidytype",
                            method: "get",
                            data: data1,
                            success: function(data) {
                                console.log(data)
                                buzhuleixing = data.data.subsidytypes
                                data.data.subsidytypes.forEach(item => {
                                    $('#buzhuxiangleixing')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                })
                                form.render('select', "tianjia")
                            },
                            error: function(err) {
                                console.log(err)
                            }
                        })
                        data1.townid = getvillage(data.value).townId
                        $.ajax({
                            url: url + "subsidy/querysubsidy",
                            method: "get",
                            data: data1,
                            success: function(data) {
                                console.log(data)
                                buzhuxiang = data.data.subsidys
                                data.data.subsidys.forEach(item => {
                                    $('#buzhuxiang')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                })
                                form.render('select', "tianjia")
                            },
                            error: function(err) {
                                console.log(err)
                            }
                        })
                    }
                    form.render('select', "tianjia")
                })


                form.render('select', "tianjia")

                form.on('select(buzhuxiangleixing)', function(data) {
                    $('#buzhuxiang').empty()
                    $('#buzhuxiang')[0].innerHTML += ` <option value="">请选择补助项</option>`
                    buzhuxiang.forEach(item => {
                        if (item.typeId == data.value) {
                            $('#buzhuxiang')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                })
                $(".tijiao").click(function() {
                    var data = form.val("tianjia");
                    data.id = 0;
                    data.applicationTime = shijianfuhaozhuanhua(data.applicationTime)
                        // 寻找镇id
                    console.log(data);
                    if (data.applicationTime !== "") {
                        $.ajax({
                            url: url + "general/subsidyinfo/editorsavesubsidyinfo",
                            data: data,
                            method: "post",
                            success: function(data) {
                                console.log(data);
                                if (data.code === 200) {
                                    layer.closeAll();
                                    table.reload("biaoge1", option);
                                    layer.msg('添加成功!')
                                } else {
                                    layer.msg(data.msg)
                                }
                            },
                            error: function(err) {
                                layer.msg('添加失败!')
                            },
                        });
                    } else {
                        layer.msg('请完善本页信息')
                    }

                });

                laydate.render({
                    elem: '#shenqingshijian' //指定元素
                });
                $("#shenqingshijian").blur(function() {
                    $("#times").empty();
                    var time = $(this).val();
                    if (time == "" || time == null) {
                        $("#shenqingshijian").after("<span id='times' style='color: red;font-size:12px;margin-left:20px;'>申请时间不能为空</span>");
                    }
                });
            }
        });
    }
    // 根据上面的删除check选中的进行删除
    function shanchucheck() {
        var checkStatus = table.checkStatus("biaoge1"); //idTest 即为基础参数 id 对应的值
        console.log(checkStatus.data); //获取选中行的数据
        var data = {}
        data.ids = [];
        checkStatus.data.forEach((item) => {
            data.ids.push(item.id);
        });
        console.log(data)
        if (data.ids.length !== 0) {
            $.ajax({
                url: url + "general/subsidyinfo/delesubsidyinfo",
                method: "get",
                data: data,
                traditional: true, //防止深度序列化
                success: function(data) {
                    if (data.code === 200) {
                        layer.closeAll();
                        table.reload("biaoge1", option);
                        layer.msg("删除成功")
                    } else {
                        layer.msg('删除失败')
                    }
                    console.log(data);

                },
                error: function(err) {},

            });
        } else {
            layer.msg('请选择本页要删除的项')
        }
    }

    // 导出全部excel
    function daochuquanbu() {
        console.log(table)
        table.exportFile('biaoge1', table.cache.biaoge1, 'xls');
    }
    // 导出选择行
    function daochuxuanzhehang() {
        var checkStatus = table.checkStatus('biaoge1'); //idTest 即为基础参数 id 对应的值
        console.log(checkStatus.data) //获取选中行的数据
        table.exportFile('biaoge1', checkStatus.data, 'xls');
    }

    function setdata(data) {
        console.log(data)
        data.forEach(item => {
            if (item.sex == 0) {
                item.sexname = "男"
            } else {
                item.sexname = "女"
            }
            item.villagename = getvillage(item.villageId).name
            item.applicationTime = timezhuanhuan(item.applicationTime)
            item.townname = gettown(item.townId).name
            if (item.address == null) {
                item.address = ""
            }
            if (item.cause == null) {
                item.cause = ""
            }
            if (item.identitynumber == null) {
                item.identitynumber = ""
            }
            if (item.phone == null) {
                item.phone = ""
            }
            if (item.remarks == null) {
                item.remarks = ""
            }
        });
        return data
    }
    // 设置查询刷新列表
    function chaxun() {
        var data = form.val("saixuan");
        option.where.areaId = data.areaId
        option.where.townid = data.townid
        option.where.villageId = data.villageId
        option.where.keywords = data.keyWords
        console.log(option.where)
        table.reload("biaoge1", option);
    } // 上传信息
    function shangchuanxinxi() {
        // 文件
        upload.render({
            elem: '#shangchuanwenjian',
            url: '',
            multiple: false,
            method: 'post',
            accept: 'file',
            auto: false,
            bindAction: "#12343213123",
            headers: {
                token: localStorage.getItem('token')
            },
            before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                loading2 = layer.load(); //换了种风格
            },
            choose: function(obj) {
                var formData = new FormData();
                obj.preview(function(index, file, result) {
                    formData.append('file', file)
                    console.log(formData.get('file'))
                    $.ajax({
                        url: url + 'Excel/subsidyUpload',
                        method: "post",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            if (data.code === 0) {
                                layer.msg(data.msg)
                                table.reload("biaoge1", option);
                            } else {
                                layer.msg(data.msg)
                            }
                        },
                        error: function(err) {
                            console.log(err)
                        }
                    })
                });

            },
        })
    }
</script>
<!-- 操作框两个按钮的模板 -->
<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="xiangqing">详情</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

</html>